<div class="project-description">
  <h1>Project</h1>
  <p>You can manage your projects here</p>
</div>
<div class="project-content">
  <div class="add">
    <h2>New project</h2>
    <p>Preview all your projects, you can manage your projects here.</p>
  </div>
  <div class="projects">
    <div class="example-container mat-elevation-z8">
      <div class="example-header">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
      </div>

      <mat-table #table [dataSource]="dataSource">

        <!-- Position Column -->
        <ng-container matColumnDef="account">
          <mat-header-cell *matHeaderCellDef> Account </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.account}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="url">
          <mat-header-cell *matHeaderCellDef> Url </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.url}} </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="projectType">
          <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.projectType}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
      <mat-paginator #paginator
                     [length]="data.length"
                     [pageSize]="10"
                     [pageSizeOptions]="[10]" (page)="changePage($event)">
      </mat-paginator>
    </div>
  </div>
</div>
